/*
 * @Description: 定制班线首页
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:48:52
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:13:02
 */
<template>
  <div
    class="main"
    v-wechat-title="$route.meta.title"
  >
    <div class="bitmap">
      <img :src="imgSrc.bitmap">
    </div>

    <div class="bus_list">
      <div
        class="no_data"
        v-if="!busList || busList.length < 1"
      >
        <img :src="imgSrc.noData">
        <p class="fontsize32">无可购买车票</p>
      </div>
      <div
        v-else
        class="bus_list"
      >
        <bus-item
          v-for="(bus, index) in busList"
          :key="index"
          :busInfo="bus"
        ></bus-item>
      </div>
    </div>
    <foot-bar selectedIndex="0"></foot-bar>
  </div>
</template>

<script>
import { getRouteList } from '@static/js/getInterface'
export default {
  data() {
    return {
      imgSrc: {
        bitmap: require('@static/img/bitmap.png'), // 页面顶部图片
        noData: require('@static/img/no-data.png') // 无数据图片
      },
      busList: []
    }
  },
  mounted() {
    let routeData = getRouteList({
      PAGE_CAPACITY: 10,
      PAGE_INDEX: 1
    }).BODY
    if (routeData && routeData.COUNT > 0) {
      this.busList = routeData.LIST
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  position: relative;
  min-height: fill-available;
  background-color: #f2f5f6;
  .bitmap {
    width: 686px;
    height: 200px;
    margin: auto;
    padding: 32px;
    img {
      width: 100%;
    }
  }
  .bus_list {
    .no_data {
      width: 522px;
      height: 320px;
      margin: auto;
      img {
        width: 100%;
      }
      p {
        font-weight: 400;
        color: #9fb0b2;
        text-align: center;
        padding-top: 26px;
      }
    }
  }
}
</style>
